<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LaTeX模版下载列表</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <h1>FlyLaTeX模版下载列表</h1>
    </header>
    <div class="container">
        <aside class="left">
            <div class="search-container">
                <input type="text" class="search-input" placeholder="输入关键词搜索模板...">
                <button class="search-button">检索模板</button>
            </div>
            <ul>
                <li>
                    <img src="./thu-logo.png" style="height: 55px; width: 60px;" alt="清华大学">
                    <a href="./ThuThesis_ Tsinghua University Thesis LaTeX Template.zip" target="_blank">清华大学-学位论文模板（适用硕士、博士学位）</a>
                </li>
                <li>
                    <img src="./xjt-logo.png" style="height: 55px; width: 60px;" alt="西安交通大学">
                    <a href="./XJTU-thesis.zip" target="_blank">西安交通大学-学位论文模板（适用硕士、博士学位）</a>
                </li>
                <li>
                    <img src="./pku-logo.png" style="height: 60px; object-fit: cover; object-position: left center; width: 64px;" alt="北京大学">
                    <a href="./2022PekingUniversityMasterThesisTemplate.zip" target="_blank">北京大学-硕士学位论文模板</a>
                </li>
                <li>
                    <img src="./fdu-logo.png" style="height: 50px; line-height: 50px;" alt="ACL 2020 模版缩略图">
                    <a href="./fduthesis-FudanUniversity.zip">复旦大学-博士学位论文模板</a>
                </li>
                <li>
                    <img src="./hkc-logo.png" style="height: 50px; line-height: 50px;" alt="香港中文大学">
                    <a href="./CUHKthesis.zip" target="_blank">香港中文大学-论文模板</a>
                </li>
                <li>
                    <img src="./bjtu-logo.png" style="height: 50px; line-height: 50px;" alt="北京交通大学">
                    <a href="./bjtu-bachelor-thesis-master.zip" target="_blank">北京交通大学-本科论文模板</a>
                </li>
                <!-- 你可以继续添加更多的模版链接 -->
            </ul>
        </aside>
        <section class="right mobile-hide">
            <h2>如何使用这些模版</h2>
	        <p>由于一个<b>LaTeX</b>文档通常包含<i>tex</i>,<i>bib</i>,<i>images</i>,<i>ttf</i>,<i>cls</i> 等元素，所以模板以 zip 包形式提供，您可以先下载，然后导入到 FlyLaTeX 中使用</p>
            <p>具体操作步骤如下：</p>
            <ol>
                <li>打开<a href="https://www.flylatex.cn/" target="_blank">FlyLaTeX</a>。</li>
                <li>下载所需的模版zip文件。</li>
                <li>创建新项目。</li>
                <li>选择 "上传项目"。</li>
                <li>上传您下载的zip文件即可。</li>
            </ol>
            <h4>由于服务器环境与本地编译环境不同，计算资源有限，我们会持续匹配常见的高校论文模板，如果您有模板需求，可以到 <a href="http://forum.inoteexpress.com:60080/forum.php?mod=forumdisplay&fid=45" target="_blank">FlyLaTeX论坛</a> 提出您的需求！</h4>
        </section>
    </div>
    <footer>
	    <p>&copy; <script>document.write(new Date().getFullYear())</script> 北京爱琴海乐之技术有限公司</p>
    </footer>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.querySelector('.search-input');
            const searchButton = document.querySelector('.search-button');
            const templateItems = document.querySelectorAll('aside.left ul li');
            
            function searchTemplates() {
                const searchTerm = searchInput.value.toLowerCase();
                
                templateItems.forEach(item => {
                    const templateText = item.textContent.toLowerCase();
                    if (templateText.includes(searchTerm)) {
                        item.style.display = '';
                    } else {
                        item.style.display = 'none';
                    }
                });
            }
            
            searchButton.addEventListener('click', searchTemplates);
            
            searchInput.addEventListener('keyup', function(event) {
                if (event.key === 'Enter') {
                    searchTemplates();
                }
            });
        });
    </script>
</body>
</html>
